<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Fun</title>
    <link rel="stylesheet" href="css/public/base.css">
    <link rel="stylesheet" href="css/fun.css">
</head>
<body>
<header id="headerWrap"></header>

<section id="content">
    <article class="articles">
        <ul class="img_list clearfix">
            <li><a href="javascript:void(0);"><img src="img/album/1.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/2.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/3.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/4.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/5.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/6.jpeg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/7.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/8.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/9.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/10.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/11.gif" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/12.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/13.gif" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/14.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/15.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/16.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/17.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/18.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/19.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/20.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/21.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/22.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/23.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/24.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/25.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/26.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/27.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/28.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/29.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/30.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/31.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/32.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/33.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/34.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/35.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/36.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/37.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/38.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/39.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/40.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/41.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/42.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/43.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/44.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/45.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/46.jpg" alt=""></a></li>
            <li><a href="javascript:void(0);"><img src="img/album/47.jpg" alt=""></a></li>
        </ul>
        <div class="img_mask"></div>
    </article>
</section>

<footer id="footer"></footer>

<a id="j_BackToTop" class="back_to_top" href="javascript:void(0)"><em></em></a>
<script src="js/public/jquery-1.9.0.min.js"></script>
<script src="js/public/globle.js"></script>
<script>
    $(function(){
        $('.img_list').find('img').unbind().bind('mouseover',function(e){
            e.stopPropagation();
            var $this=$(this);
            var top=$this.parent().parent().position().top;
            var left=$this.parent().parent().position().left;
            $('.img_mask').animate({top:top,left:left},200);
        });
    });
</script>
</body>
</html>